<template>
  <div class="doc_7">
    <p>文本为基础组件，可用于展示各种文案等信息，可添加动画效果，可绑定事件来实现页面跳转/分享等功能，也可与其他组件组合使用；</p>
    <p>
      <span>
        <img src="https://cdn.nlark.com/yuque/0/2019/png/356919/1559097719402-b467564d-a4a5-4cc3-bb79-bea8543b2f4e.png?x-oss-process=image/resize,w_1068" alt="">
      </span>
    </p>
    <p></p>

    <p>注意⚠️当你创建的是弹层的时候，文本组件会多一个属性是动态文本，这个当在打开弹出的时候会赋予动态的文本，如图。</p>
    <p>
      <span>
        <img src="https://cdn.nlark.com/yuque/0/2019/png/356936/1559266389881-14331eb1-354f-4048-83c9-80abd10ad00a.png?x-oss-process=image/resize,w_322" alt="">
      </span>
    </p>
    <p></p>

    <h2 id="doc_7_1">1. 通用编辑</h2>
    <p>移动：a. 鼠标选中元素进行拖拽；b. 在右侧属性编辑界面输入坐标值（x/y）精准定位；c.选中元素，键盘上下左右按键控制移动位置；</p>
    <p>通用属性：</p>
    <p>
      <ol>
        <li>组件id：页面中每添加一个元素都是唯一的，用组件id作为唯一标识，不建议修改此项；</li>
        <li>是否可见：控制元素在展示时，是否显示；默认可见；</li>
        <li>固定布局：控制元素是否随页面切换而动；默认跟随页面；</li>
        <li>定位类型：控制元素在页面展示时，位于页面的哪个位置；默认无；可配合固定布局属性组合使用，制作导航菜单/底部菜单等功能；</li>
      </ol>
    </p>
    <p>
      <span>
        <img src="https://cdn.nlark.com/yuque/0/2019/png/356919/1559099700918-f876dd56-c453-46d9-9616-1e547b5f9a9d.png?x-oss-process=image/resize,w_968" alt="">
      </span>
    </p>
    <p></p>

    <h2 id="doc_7_2">2. 字体编辑</h2>
    <p>
      <ol>
        <li>字体：可设置文本元素的字体样式，目前有方正黑简/思源细体/站酷高端黑等字体，默认系统自带字体样式；</li>
        <li>字号：文本元素字体大小；</li>
        <li>字体颜色：文本元素字体颜色；</li>
        <li>背景颜色：文本元素背景颜色；</li>
        <li>字体样式快捷设置：设置文本在文本框的位置/加粗/斜体/下划线等；</li>
        <li>行高：设置文本在文本框中的行高；</li>
        <li>字距：文本元素的字距；</li>
        <li>透明度：文本元素的透明度；</li>
        <li>旋转：文本元素的旋转角度；</li>
        <li>滚动条颜色：当文本长度超出文本框时，会自动显示滚动条，此可设置滚动条颜色；</li>
      </ol>
    </p>
  </div>
</template>

<script>
  import { submenuMixin } from '@/views/child/doc/data/submenu';
  export default {
    mixins: [submenuMixin],
  }
</script>

<style lang="scss" scoped>
  @import '@/assets/css/doc.scss';
</style>
